<template>
	<view id="getIn">

		<!-- 自定义导航 -->
		<uni-nav-bar background-color="#02A8F4" status-bar="true" left-icon="back" color="#fff" title="入库记录"
		 @click-left='goBack' @click-right='choose'></uni-nav-bar>
		 <!-- 搜索 -->
		<view class="search">
			<view class="headerContent">
				<input type="text" v-model="searchText" placeholder="手机号"/>
				<text @tap="search">搜索</text>
			</view>
		</view>
		<!-- 列表 -->
		<view class="uni-list">
			<view class="uni-loadmore" v-if="showLoadMore">{{pullDownText}}</view>

			<view v-if="list.length == 0" class="nothing">暂无入库记录</view>
			<view class="uni-list-cell" v-for="(item,index) in list" :key="index">
				<view class="uni-list-cell-navigate uni-navigate-right">
					<view class="basic">
						<!-- substr(0, 3) + '****' + tel.substr(7) -->
						<view>姓名：<text>{{item.orderUserName}}</text></view>
						<view>电话：<text>{{item.phone}}</text></view>
					</view>
					<view class="middle">
						<view>运单号：<text>{{item.orderCode}}</text></view>
						<view>{{item.orderType}}</view>
					</view>
					<view class="bottom">
						<view class="entry">录入时间：<text>{{item.modifyTime}}</text></view>
						<view class="delivery" v-if="item.status == 0">提货状态：<text>未拿货</text></view>
						<view style="color: green;" v-else>提货状态：<text>已拿货</text></view>

					</view>
				</view>
			</view>
			<uni-load-more :loadingType="loadingType" :showImage="true" v-if="list.length != 0"></uni-load-more>
		</view>
		<!-- 按钮 -->
		<view class="footer">
			<view class="btns">
				<view class="left" @tap="handle">
					<image src="../../static/icon-compile@2x.png"></image>
					<text>手工录入</text>
				</view>
				<view class="right" @tap="toScan">
					<image src="../../static/icon-scan@2x.png"></image>
					<text>扫码录入</text>
				</view>
			</view>
			<view class="showSheet" v-if="isClick">
				<view class="mask" @tap="close"></view>
				<view class="drop">
					<input type="text" placeholder="运单号" v-model="num"/>
					<input type="text" placeholder="快递公司" v-model="company"/>
					<input type="text" placeholder="姓名" v-model="name"/>
					<input type="text" placeholder="手机号" v-model="tel" maxlength="11"/>
					<button type="primary" @tap="submit" style="width:80%">确定</button>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-nav/uni-nav-bar.vue"
	import Icon from '../../components/uni-nav/uni-icon.vue'
	import uniStatusBar from '../../components/uni-nav/uni-status-bar.vue'
	import uniLoadMore from "../../components/uni-load-more.vue"
	let common = require('../../common/common.js');
	export default{
		components: {
			uniNavBar,
			Icon,
			uniStatusBar,
			uniLoadMore
		},
		data(){
			return{
				isClick:false,  //点击手工录入显示
				list:[],		//列表
				loadingType:0,	//加载状态
				page:1,         //当前页
				pagesize:5,
				total:null,
				pullDownText:'加载中...',//下拉刷新
				showLoadMore: false,
				searchText: '',//搜索值
				num:'',//运单号
				company:'',//快递公司
				name:'',//收货人姓名
				tel:''//手机号
			}
		},
		// 类似mounted
		onReady() {
			this.getLists()
		},
		//下拉刷新的时候请求一次数据
		onPullDownRefresh() {
			this.showLoadMore = true;
			if(this.list.length == this.total){
				setTimeout(()=>{
					this.pullDownText = '没有更多数据了';
				},1000);
				setTimeout(()=>{
					this.showLoadMore = false;
					uni.stopPullDownRefresh()//下拉loading停止
				},3000)

			}else{
				setTimeout(()=>{
					this.showLoadMore = false;
					uni.stopPullDownRefresh()//下拉loading停止
				},3000)
				this.getLists();
			}
		},
		// 到达底部上拉加载更多
		onReachBottom() {
			// 触发增加页数
			this.page ++;
			
			this.loadingType = 1;
			this.getLists();
			
			let length = this.list.length;
			setTimeout(() => {
				if (length == this.total) {
					this.loadingType = 2;
					return;
				}
				this.loadingType = 0;
				uni.stopPullDownRefresh();
			}, 800);
		},
		methods:{
			// 获取列表
			getLists(){
				uni.request({
					url:this.$BaseUrl + 'smOrder/getOrderList',
					method: 'GET',
					data: {
						phone: this.searchText,
						pageNum: this.page,
						pageSize:this.pagesize,
						status:0
					},
					success: (res) => {
						if(res.data.code == 0){
							// 获取总数
							this.total = res.data.data.pageinfo.totalElements;
							// 时间转换
							res.data.data.content.forEach(item=>{
								item.modifyTime = common.timer(item.modifyTime);
								item.phone = item.phone.substr(0,3)+'****'+item.phone.substr(7);
								item.orderCode = item.orderCode.substr(0,3)+'****'+item.orderCode.substr(7);

							});
							// 判断是否为第一页
							if(this.page != 1){
								res.data.data.content.forEach(item=>{
									this.list.push(item)
								})
							}else{
								this.list = res.data.data.content;
							}
							
							if (!res.data.data.content) {
								//没有数据了
								this.loadingType = 2;
								return;
							}
						}else{
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					}
				})
			},
			// 返回
			goBack(){
				uni.navigateBack({
					delta: 1
				});
			},
			search(){
				this.page = 1;
				this.getLists(this.page)
			},
			// 关闭菜单
			close(){
				this.isClick = false
			},
			// 扫码
			toScan(){
				uni.scanCode({
					onlyFromCamera: true,
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						console.log('条码path：' + res.path);
						console.log('条码字码符：' + res.charSet);
					}
				});
			},
			// 编辑
			handle(){
				this.isClick = true;
				this.num = '';
				this.company = '';
				this.name = '';
				this.tel = ''
			},
			//确定编辑
			submit(){
				if(this.num == ''||this.company == ''||this.name == ''||this.tel == ''){
					uni.showToast({
						icon:"none",
						title:'请输入您需要录入的数据'
					})
					return
				}
				// if(common.codeNumber(thi.num))
				if(common.phoneVertify(this.userPhone).type){
					uni.showToast({
						icon:'none',
						title:common.phoneVertify(this.userPhone).error
					})
					return
				}
				common.request("/smOrder/insertOrder",'POST',{
					id: uni.getStorageSync('userInfo').id,
					orderUserName: this.name,
					phone: this.tel,
					orderType: this.company,
					orderCode: this.num
				},this.AuthorizationStr).then(res=>{
					if(res.code == 0){
						this.isClick = false;
						this.getLists()
						uni.showToast({
							icon:'none',
							title:res.msg
						});
					}
				})
			}
		}
	}
</script>

<style>
	#getIn{
		width:100%;
		height:100%;
		background-color: #fff;
		position: relative;
	}
	.uni-loadmore{
		width:100%;
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		font-size: 30upx;
	}
	.showSheet{
		width:100%;
		height:1337upx;
		position: fixed;
		top: 0;
	}
	.mask{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		z-index: 100;
		background-color: rgba(0,0,0,.3)
	}
	.drop{
		width:100%;
		height: 590upx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		z-index: 200;
	}
	.drop input{
		width:700upx;
		margin:10upx auto 30upx;
		height: 90upx;
		border-bottom: 1px dashed #ccc;
		padding-left: 30upx;
		box-sizing: border-box;
		background-color: #fff
	}
	.footer{
		position: relative;
	}
	.btns{
		width:100%;
		height: 100upx;
		background-color: #02A8F4;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.btns image{
		width:45upx;
		height:45upx;
		margin-right: 20upx;
	}
	.btns text{
		color: #fff;
	}
	.left,.right{
		width: 50%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.left{
		border-right: 1px dashed #ccc;
	}
	.uni-navbar-shadow {
		box-shadow:unset;
	}
	
	.search{
		width:100%;
		height: 120upx;
		background-color: #02A8F4;
	}
	.headerContent{
		width: 700upx;
		height: 100%;
		margin: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.search input{
		width:600upx;
		height: 60upx;
		border-radius: 8upx;
		outline: none;
		font-size: 28upx;
		background-color: #fff;
		opacity: .7;
		padding-left:20upx;
		box-sizing: border-box;
	}
	.search text{
		color: #FFFFFF;
		font-size: 32upx;
	}
	.uni-list{
		width: 700upx;
		margin:auto;
		padding-bottom: 150upx;
	}
	.uni-list .uni-list-cell-navigate{
		width:100%;
		height: 230upx;
		margin-top: 20upx;
		background-color: #f1f1f1;
		border-radius: 10upx;
	}
	.basic,.middle,.bottom{
		width:95%;
		margin: auto;
		font-size: 28upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.basic{
		height: 90upx;
		border-bottom: 1px solid #DDDDDD;
	}
	.middle{
		margin: 30upx auto;
	}
	.bottom .entry{
		font-size: 24upx;
		color: #999999;
	}
	.delivery{
		font-size: 24upx;
	}
	.delivery text{
		color: red;
	}
	.nothing{
		width:100%;
		height: 750upx;
		text-align: center;
		line-height: 750upx;
	}
	.Curtain{
		width: 700upx;
		/* height: 52upx; */
		/* margin-top: 30upx; */
	}
	
	/* .drop{
		width:174upx;
		height: 157upx;
		position:absolute ;
		top: 100upx;
		left:70%;
		z-index: 200;
		border-radius: 10upx;
		background-color: #fff;
	}
	.drop view{
		height: 78upx;
		font-size: 24upx;
		text-align: center;
		line-height: 78upx;
	}
	.drop view:first-child{
		border-bottom: 1px solid #ddd;
	} */
</style>